<template>
  <div>
     <div>
          <!-- <van-tabs  @click="tofilm">
            <van-tab title="首页" to="/index"> </van-tab>       
            <van-tab title="全部" to="/allFilms"> </van-tab>       
            <van-tab title="推荐" to="/recommend"> </van-tab>       
            <van-tab title="科幻" to="/allFilms"> </van-tab>       
            <van-tab title="剧情" to="/allFilms"> </van-tab>       
            <van-tab title="喜剧" to="/allFilms"> </van-tab>       
            <van-tab title="爱情" to="/allFilms"> </van-tab>       
            <van-tab title="战争" to="/allFilms"> </van-tab>       
            <van-tab title="冒险" to="/allFilms"> </van-tab>      
          </van-tabs> -->

          <div class="daohang">
            <van-row gutter="20">
              <van-col span="4"><router-link to="/index">首页</router-link></van-col>
              <van-col span="4"> <router-link to="/allFilms">全部</router-link></van-col>
              <van-col span="4"> <router-link to="/recommend">推荐</router-link></van-col>
              <van-col span="4"><router-link to="/love">爱情</router-link></van-col>
              <van-col span="4"> <router-link to="/science">科幻</router-link></van-col>
              <van-col span="4" @click="showPopup" style="color: aliceblue;"> 更多 </van-col>
            
            </van-row>
          </div>

     </div>

     <van-popup v-model="show" position="right" class="yingcang">
       <!-- <div style="margin-bottom:3px;" @click="show = false"><router-link to="/allFilms" >喜剧</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/recommend">动作</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">灾难</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/allFilms" >战争</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/recommend">恐怖</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">悬疑</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">惊悚</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">犯罪</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">冒险</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">奇幻</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">历史</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">传记</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">同性</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/33">西部</router-link></div> -->
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/animation">动画</router-link></div>
       <div style="margin-bottom:3px;" @click="show = false"><router-link to="/others">其它</router-link></div>
         
     </van-popup>

     <!-- 路由的坑 -->
    <transition>
       <router-view/>
    </transition>
        
     
  </div>
</template>

<script>
export default {
  name: 'AllTypes',
  data () {
   return {
    show:false,
    alltypes:[
      "全部","推荐", "科幻","剧情", "喜剧","爱情", "战争","冒险"
    ],
   } 
  },
  mounted() {
    
  },
  methods:{
    toxiju(){
      alert("111")
    },
     getRandomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    showPopup() {
      this.show = true;
    },
    tofilm(name,title){
      // console.log(name,title)
    }
  },
  
}
</script>

<style scoped>
   /deep/.yingcang {
    width: 16% ;
    margin-top: 16px
  }
  /deep/ .van-popup {
    
    background-color: rgba(255, 255, 255, 0.1);
 
}
/deep/ .van-popup--right {
    /* top: 44%; */
    top: 15%;
    right: 0;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
  }
  /* 导航样式 */
  .daohang{
    margin: 14px;
    margin-top: 10px;
    font-size: 15px;
  }
  a {
    color: aliceblue;
    }  
  .myactive{
    border-bottom: solid #ee0a24 3px;
    /* color: aqua; */
    border-radius: 3px;
  }
    
  /* 导航栏 */
  /deep/ .van-tabs__nav{
     background-color: #16161A;
  }
  /deep/ .van-tab{
    color: azure;
  }

  /* 字体 */
  .film_imgs .van-grid-item div{
    font-size: 15px;
    text-align: center;
  }
  /* 图片 */
    .film_imgs .van-grid-item .van-image{
        width: 100px;
        height: 110px;      
    }
    /* 轮播图样式 */
    .swipe_imgs{
        width: 100%;
        height: 200px;
        /* border-radius: 10px; */
    }
    /* 卡片背景 */
    .van-grid-item__content {    
      /* background-color: #eee; */
      background-color: #010000;
      padding: 5px 3px;
    }
    /* 切换时动画 */
    .v-enter{
      opacity: 0;
      transform: translateX(100%);
    }
    .v-leave-to{
      opacity: 0;
      transform: translateX(-100%);
      position: absolute;
    }
    .v-enter-active,
    .v-leave-active{
      transition: all 0.4s ease;
    }


</style>